<template>
  <div class="layoutWapper">
    <ul>
      <li
        v-for="item in layoutList"
        :key="item.num"
        :class="{ actived: isLayoutActive == item.num ? true : false }"
        @click="selectLayout(item)"
      >
        {{ item.type }}
      </li>
    </ul>
    <div class="footer">
      <el-button type="primary" class="btn" @click="changeLayout"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'layout',
  data() {
    return {
      isLayoutActive: '0',
      selected: '',
      layoutList: [
        {
          type: '随机布局',
          num: '1',
        },
        {
          type: '力导布局',
          num: '2',
        },
        {
          type: '环形布局',
          num: '3',
        },
        {
          type: '辐射状布局',
          num: '4',
        },
        {
          type: '树状布局',
          num: '5',
        },
        {
          type: '同心圆布局',
          num: '6',
        },
        {
          type: '网格布局',
          num: '7',
        },
      ],
    };
  },
  methods: {
    selectLayout(params) {
      this.isLayoutActive = params.num;
      this.selected = params.type;
    },
    changeLayout() {
      if (!this.selected) {
        this.$message({
          type: 'warning',
          message: '请先选择布局样式',
        });
        return;
      }
      switch (this.selected) {
        case '随机布局啊':
          this.$eventBus.$emit('refreshLayout', 'random');
          break;
        case '力导布局':
          this.$eventBus.$emit('refreshLayout', 'force');
          break;
        case '环形布局':
          this.$eventBus.$emit('refreshLayout', 'circular');
          break;
        case '辐射状布局':
          this.$eventBus.$emit('refreshLayout', 'radial');
          break;
        case '树状布局':
          this.$eventBus.$emit('refreshLayout', 'dagre');
          break;
        case '同心圆布局':
          this.$eventBus.$emit('refreshLayout', 'concentric');
          break;
        case '网格布局':
          this.$eventBus.$emit('refreshLayout', 'grid');
          break;
      }
      // this.selected = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.layoutWapper {
  padding: 20px 15px 10px;
}

ul {
  display: flex;
  flex-wrap: wrap;

  li {
    padding: 10px 0;
    flex: 0 0 33.3%;
    width: 64px;
    height: 21px;
    font-size: 14px;
    color: #a1a6b5;
    line-height: 21px;
    text-align: left;
    cursor: pointer;
  }

  li.actived {
    color: #333333;
  }
}

.footer {
  display: flex;
  justify-content: flex-end;

  .btn {
    width: 90px;
    height: 32px;
    padding: 0;
    background-color: #4b71eb;
    border-radius: 2px;
  }
}
</style>
